import React, { Component } from 'react';
import { Icon } from 'antd';
import './Orgchart.less';
import OrgChart from 'react-orgchart';
import 'react-orgchart/index.css';

const handleClick = () => {
}

const MyNodeComponent = ({ node }) => {
  return (
    <div>
      <div className="initechNode" style={{ width: '70px', height: '40px', background: '#fff', border: '1px solid #000', margin: '0 auto', textAlign: 'center', lineHeight: '40px' }} onClick={() => alert("Hi my real name is: " + node.actor)}>{node.name}</div>
      <div>
        <Icon type="plus-circle-o" style={{ display: 'block', cursor: 'pointer' }} onClick={handleClick} />
        <Icon type="minus" style={{ display: 'none', cursor: 'pointer' }} />
      </div>
    </div>
  );
};
class Orgchart extends Component {
  constructor(props) {
    super(props)
    this.state = {
      clickProps: {
        display: 'block',
        type: 'plus-circle-o',
      }
    }
  }

  render() {

    const initechOrg = {
      name: "分类",

      actor: "Gary Cole",
      children: [
        {
          name: "菜谱",
          actor: "Ron Livingston",
          children: [
            {
              name: "博西菜谱",
              actor: "This is just to show how to build a complex tree with multiple levels of children. Enjoy!",
              children: [
                {
                  name: "豆果菜谱",
                  actor: "This is just to show how to build a complex tree with multiple levels of children. Enjoy!"
                }
              ]
            }
          ]
        },
        {
          name: "口味",
          actor: "Stephen Root"
        },
        {
          name: "健康",
          actor: "Stephen Root"
        },
        {
          name: "+ 添加",
          actor: "John C. McGi..."
        },
      ]
    };

    return (
      <div className="Orgchart" id="initechOrgChart" style={{ marginTop: '50px' }}>
        <OrgChart tree={initechOrg} NodeComponent={MyNodeComponent} />
      </div>
    );
  }
}

export default Orgchart
